<template>
  <div class="toper">
    <div class="titleBox">
      <div class="title">
        我的消息
      </div>
      <div class="setting">
        <!-- <img
          src="../../assets/img/setting.png"
          alt=""
        >
        <div>设置</div> -->
      </div>
    </div>
    <div class="msgType">
      <div
        v-for="item in typeList"
        :key="item.id"
        :class="{ active: activeIndex == item.id }"
        @click="checkType(item)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="type">
      <div
        v-for="(item, index) in message_type"
        :key="item.id"
        :class="typeIndex == index ? 'selected' : ''"
        @click="typeSelected(index, item)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeList: [
        {
          title: "新消息",
          id: 1,
          bReaded: false,
        },
        {
          title: "已读消息",
          id: 2,
          bReaded: true,
        },
      ],
      activeIndex: 1,
      message_type: [
        {
          title: "所有消息",
          id: 1,
          value: "all",
        },
        {
          title: "订单消息",
          id: 2,
          value: "order",
        },
        {
          title: "账户消息",
          id: 3,
          value: "account",
        },
        {
          title: "系统消息",
          id: 4,
          value: "system",
        },
      ],
      typeIndex: 0,
    };
  },
  methods: {
    checkType(item) {
      this.activeIndex = item.id;
      this.$emit("bReaded", item.bReaded);
    },
    typeSelected(index, item) {
      this.typeIndex = index;
      this.$emit("typeValue", item.value);
    },
  },
};
</script>

<style scoped lang="scss">
.toper {
  height: 12.5rem;
  background: #fff;
  margin-bottom: 1.25rem;

  .titleBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2.75rem 2.63rem 0 2.63rem;
    align-items: center;

    .title {
      font-size: 1.13rem;
      color: #333;
    }

    .setting {
      font-size: 0.88rem;
      color: #999;
      display: flex;
      flex-direction: row;
      vertical-align: middle;
      align-items: center;

      img {
        margin-right: 0.56rem;
      }
    }
  }

  .msgType {
    margin: 1.31rem 1.75rem 0;
    border-bottom: 0.06rem solid #d8d8d8;
    display: flex;
    flex-direction: row;

    > div {
      text-align: center;
      font-size: 1.13rem;
      width: 6.75rem;
      color: #666666;
      padding: 0.94rem 0;

      &.active {
        position: relative;
        color: #f0406f;

        &:after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 6.75rem;
          height: 0.31rem;
          background: rgba(240, 64, 111, 1);
        }
      }
    }
  }

  .type {
    display: flex;
    flex-direction: row;
    font-size: 0.88rem;
    color: #999999;
    padding: 1.44rem 2.69rem 1.75rem;

    div {
      border-right: 0.12rem solid #999;
      padding: 0 3.31rem;
      cursor: pointer;

      &:hover {
        color: #666666;
      }

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        border-right: none;
      }

      &.selected {
        color: #666666;
      }
    }
  }
}
</style>
